{% extends "layouts/layout.html" %}
{% block title %}
Items
{% endblock %}
{% block content %}
<h3>All Items</h3>
<hr />
<script type="text/javascript" src="/js/items/items.js"></script>

<form action="/items/search" method="get">
  <div class="well ui-widget">Advanced Search: 
    <input type="text" data-provide="typeahead" id="advanced_search" name="query"/><br/>
    <ul id="search_results">
    </ul>
    <script>
    function suggestion_clicked(val){
      $("#advanced_search").val(val);
      $("#advanced_search").focus();
      $("#search_results").html("");
    }

    $('#advanced_search').typeahead({
        source: function (query, typeahead) {
          console.log(typeahead);
          console.log(query)
          $("#search_results").html("Loading...");
            $.get("/webservices/local_search_suggestions", { 'query' : query }, function(resp){
              console.log(resp);
              j = JSON.parse(resp);
              //for (object in j) {
              //  var name = j.name
             // }
             $("#search_results").html("");
              var ret = j["items"];
              $.each(ret, function(index, r){
                console.log(r);
                $("#search_results").append("<li><b>" + r.name + "</b></li>");
                for (var i = 0; i < r.items.length; i++) {
                  r_2 = r.items[i];
                  $("#search_results").append(("<li><a href=\"#\" onclick=\"suggestion_clicked('" + r_2["fullString"].replace(/[^a-zA-Z0-9 \$\%\-_\!\.&=/:\?]/g, '') + "')\">" + r_2["fullString"].replace(/[^a-zA-Z0-9 \$\%\-_\!\.&=/:\?]/g, '') + "</a></li>"));
                };
              });
            });
        },
        property: "item"
    });
    </script>
    <div id="search_forms">
      Limit: <select name="query_limit" id="query_limit" value="10">
          <option value="10">10</option>
          <option value="25">25</option>
          <option value="50">50</option>
          <option value="100">100</option>                              
        </select>
      <br />
      Sort By: <select name="query_sortA" id="query_sortA" value="title">
          <option value="title">Title</option>
          <option value="description">Description</option>
          <option value="price">Price</option>
          <option value="time_create">Time Created</option>
          <option value="location">Location</option>
      </select>
      <select name="query_orderA" id="query_orderA" value="desc">
        <option value="desc">DESC</option>
        <option value="asc">ASC</option>    
      </select>
      And: <select name="query_sortB" id="query_sortB" value="title">
          <option value="title">Title</option>
          <option value="description">Description</option>
          <option value="price">Price</option>
          <option value="time_create">Time Created</option>
          <option value="location">Location</option>
      </select>
      <select name="query_orderB" id="query_orderB" value="desc">
        <option value="desc">DESC</option>
        <option value="asc">ASC</option>    
      </select>
      <br />
      <input type="submit" id="query_submit" class="btn" value="Search" \>
    </div>
    {% if user %}
      <p><br/><a href="/items/old_searches">View Old Searches</a></p>
    {% endif %}
  </div>
</form>



<br/><br/>
<table class="datatable table table-striped">
	<thead>
		<tr>
      <th width="10%">Posted</th><th>Title</th><th>Description</th><th>Price</th>
			{% if is_admin %}
			<th>Delete</th><th width="15%">Expiration Date</th>
			{% endif %}
      {% if user %}
        <th>Contact</th>
      {% endif %}
		</tr>
	</thead>
	<tbody>
		{% for item in items %}
		<tr>
      <td>
        <div>{{item.created_at.strftime("%m/%d/%Y")}}</div>
      </td>
			<td>
				<a href="/items/view_item?item_id={{ item.key().id() }}">
					<div>{{ item.title }}</div>
				</a>
			</td>
			<td>{% if item.summary %} {{ item.summary }} {% else %} {{ item.description }} {% endif %}</td>
			<td>${{ item.price }}</td>
			{% if is_admin %}
			<td>
				<a href="/items/delete_item?item_id={{ item.key().id() }}&xsrf_token={{xsrf_token}}">
					<button class="btn btn-primary"  value="Delete">Delete Item</button> 
				</a>
			</td>
      <td>{{item.expiration_date.strftime("%m/%d/%Y")}}</td>
			{% endif %}
      {% if user %}
        <td>
          <a href="/threads/new_thread?about={{ item.key().id() }}">
            <button class="btn btn-primary" value="Contact Seller">Contact Seller</button> 
          </a>
        </td>
      {% endif %}
		</tr>
		{% endfor %}
	</tbody>
</table>
<br/>
<br />
{% if user %}
<p><a class="btn" href="/items/new_item">New Item</a></p>
{% endif %}

{% endblock %}
